import React, { Component } from 'react';
import axios from "axios";
import Main from "../common/Main";
import { Row, Col, Input, Icon, Carousel, Layout } from 'antd';
import "./index.css";
import UserInfoEdit from './UserInfo';
import OrderList from './orderList';
const { Content } = Layout;
class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowUserInfoEdit: false,
      isShowOrderList: false,
      orderListType: 0
    };
  }
  onShowUserInfoEdit() {
    this.setState({ isShowUserInfoEdit: true });
  }
  onHideUserInfoEdit() {
    this.setState({ isShowUserInfoEdit: false });
  }
  onShowOrderList(type) {
    this.setState({ isShowOrderList: true, orderListType: type });
  }
  onHideOrderList() {
    this.setState({ isShowOrderList: false });
  }
  updateOrderListType(type) {
    this.setState({ orderListType: type })
  }
  render() {
    return (
      <Main>
        <div className="user-page">
          <div className="top">
            <div className="config-btn" onClick={() => this.onShowUserInfoEdit()}>
              <Icon type="setting" />
            </div>
            <UserInfo />
          </div>
          <MyOrder onShowOrderList={(type) => this.onShowOrderList(type)} />
          <MyAssets></MyAssets>
          <UserInfoEdit show={this.state.isShowUserInfoEdit} onHide={() => this.onHideUserInfoEdit()}></UserInfoEdit>
          <OrderList show={this.state.isShowOrderList}
            onHide={() => this.onHideOrderList()}
            orderListType={this.state.orderListType}
            updateOrderListType={(type) => this.updateOrderListType(type)}
          ></OrderList>
        </div>
      </Main>
    )
  }
}
class UserInfo extends Component {
  render() {
    return (
      <div className="user-info">
        <div className="header-img">
          <img src="./images/3.png" alt="" />
        </div>
        <div className="name">哥只是个传说</div>
      </div>
    )
  }
}
class MyOrder extends Component {
  constructor(props) {
    super(props);
    this.state = {
      types: [{ name: "待付款", icon: "wallet", type: 1 },
      { name: "待发货", icon: "save", type: 2 },
      { name: "待收货", icon: "car", type: 3 },
      { name: "退货/售后", icon: "reload", type: 4 }]
    }
  }
  render() {
    return (
      <div className="myOrder info-box">
        <div className="box-top">
          <div className="title">
            全部订单
          </div>
          <div className="more" onClick={() => this.props.onShowOrderList(0)}>
            查看所有订单>>
          </div>
        </div>
        <Row gutter={0} className="box-content">
          {this.state.types.map((type, i) => (
            <Col span={6} key={i} onClick={() => { this.props.onShowOrderList(type.type); }}>
              <div className="icon">
                <Icon type={type.icon} />
              </div>
              {type.name}
            </Col>)
          )}
        </Row>
      </div>
    )
  }
}
class MyAssets extends Component {
  render() {
    return (
      <div className="myOrder info-box">
        <div className="box-top">
          <div className="title">
            我的资产
          </div>
          <div className="more">
            查看全部资产>>
          </div>
        </div>
        <Row gutter={0} className="box-content">
          <Col span={8}>
            <div className="value">
              0
            </div>
            积分
          </Col>
          <Col span={8}>
            <div className="value">
              0
            </div>
            优惠券
          </Col>
          <Col span={8}>
            <div className="value">
              0
            </div>
            余额
          </Col>
        </Row>
      </div>
    )
  }
}
export default User;